<template>
	<view class="index_Content">
		<view class="Outer_container">
			<!-- 头部搜索 -->
			<view class="index_header">
				<view class="index_Search" @click="handeleSearch">
					<image :src='serverImageUrl("/static/images/register/index_ser.png")' style="width: 28rpx;height: 28rpx;" mode="" />
					<view style="font-size: 24rpx;margin-left: 10rpx;">请输入您想要查找的内容</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="index_Swiper">
				<u-swiper :list="swiperList" mode="none" border-radius="28"></u-swiper>
			</view>

			<!-- 功能模块-横向滑动 -->
			<view class="index_jurs">
				<scroll-view class="scroll-view" scroll-x="true">
					<view class="scroll-content">
						<view class="item" v-for="(item,index) in jurisdictionList" :key="index"
							@click="handeleRouter(item)">
							<image :src="lang==='zh'?IMGURL+item.image:IMGURL+item.image_ru" 
								style="width: 80rpx;height: 80rpx;"/>
							<view style="width: 100rpx;text-align: center;word-break: break-all;height: 100rpx;margin-top: 16rpx;">
								{{lang==='zh'?item.title:item.title_ru}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 小轮播图 -->
		<view class="index_min_Swiper">
			<u-swiper :list="swiperList" height="146" mode="none" border-radius="18"></u-swiper>
		</view>

		<!-- 猜你喜欢 -->
		<view class="commodityTJ">
			<view class="goodsTJ">
				<view style="display: flex;">
					<view style="z-index: 100;">猜你喜欢</view>
					<view class="backTJ"></view>
				</view>
			</view>
			<!-- 显示喜欢的商品列表 -->
			<view class="goodsBlock">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<image class="goodsImage" v-for="(item,index) in likeList" :key="index" :src="IMGURL+item.logo" mode="">
				</scroll-view>
			</view>
		</view>

		<!-- 商品推荐 -->
		<view class="index_recommend">
			
			
			<!-- 商品推荐文字 -->
			<view class="recommendTJ">
				<view class="Vertical_line"></view>
				<view>{{$t('商品推荐')}}</view>
			</view>
			<!-- 商品列表 -->
			<view class="goods_container">
				<view v-for="(item,index) in goodsList" :key="index"
					:class="(index % 2 === 0)?'.goods_block_d':'.goods_block_s'">
						<image :src="IMGURL+item.logo" style="width: 336rpx;height: 320rpx;border-radius: 16rpx;" />
						<!-- 商品名称 -->
						<view class="goodsTitle">{{lang==='zh'?item.name:item.name_ru}}</view>
						<!-- 商品介绍 -->
						<view class="goodsBrief">{{lang==='zh'?item.goods_brief:goods_brief_ru}}</view>
					</view>
			</view>
			<!-- 商品推荐有图无字 -->
			<view class="images_list">
				<view v-for="(item,index) in imageList" :key="index"
					:class="(index % 2 === 0)?'images_block_s':'images_block_d'"></view>
			</view>
		</view>
		<div @click.stop="goAi" class="goAi">
			<div>AI助手</div>
			<div>
				测试入口
			</div>
			<!-- <Service @click.stop="goAi" /> -->
		</div>
		<image class="images_header" :src='serverImageUrl("/static/images/register/index_index@4x.png")' mode=""/>
		<u-popup v-model="isAuthentication" mode="center" :mask-close-able="ask" border-radius="16">
			<view class="index_isAuthentication">
				<view class="index_reminder">{{$t('温馨提示')}}</view>
				<view class="index_reminder_Aut">
					您还未进行身份认证，请前往认证页面进行认证
				</view>
				<u-button @click="handeleGoAuthentication">{{$t('立即认证')}}</u-button>
				<u-button style="margin-top: 30rpx;" @click="logOut">{{$t('退出登录')}}</u-button>
				<view style="width:100%;height:25px"></view>
				
			</view>
		</u-popup>
		<tabbar :custom-style="{}" v-if="isShow==0" :listLang="listLang" />
	</view>
</template>

<script>
	// #ifndef MP-WEIXIN
	import TencentCloudChat from '@tencentcloud/chat';
	// #endif
	import tabbar from "@/components/tabbar/index.vue";
	import index from "@/pages/tabbar/index.vue";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				isShow:false,
				link: true,
				imageList: [1, 2, 3, 4],//商品推荐有图无字
				goodsList: [], //商品列表
				likeList: [], //猜你喜欢数组
				jurisdictionList: [], //功能模块数组
				swiperList: [], //轮播图
				lang:'zh',
				IMGURL: IMAGE_URL, //图片前缀
				current: 0, //轮播图参数
				show_city: '不限',
				page: 1,
				iconUrl: {  //路由地址
					goods1: "/pages/index/goodsPromotion/goodsPromotion",
					goods2: "/pages/index/goodsPromotion/goodsPromotion",
					transport1: "/pages/index/transportList/transport",
					transport2: "/pages/index/transportList/transport",
					crossborder1: "/pages/index/freightForwarder/freightForwarder",
					crossborder2: "/pages/index/freightForwarder/freightForwarder",
					professional1: "/pages/index/agencyList/agencyList",
					professional2: "/pages/index/agencyList/agencyList",
					lifead1: "/pages/index/lifeadvertisingList/lifeadvertisingList",
					lifead2: "/pages/index/lifeadvertisingList/lifeadvertisingList",
					news1: "/pages/index/candrNewsList/candrNewsList",
					news2: "/pages/index/candrNewsList/candrNewsList",
					exposure1: "/pages/index/exposureTableList/exposureTableList",
					exposure2: "/pages/index/exposureTableList/exposureTableList",
					library1: "/pages/user/repository/repository",
					library2: "/pages/user/repository/repository",
				},
				isAuthentication:false,
				listLang:[]
			}
		},
		onShow() {
			// 判断是否选择语言
			const lang = uni.getStorageSync('lang')
			if (!lang) {
				this.$u.route({
					url: '/pages/tabbar/startPage/language'
				})
				return false
			}
			const startPage = uni.getStorageSync('startPage');
			if (!startPage) {
				this.$u.route({
					url: '/pages/tabbar/startPage/startPage',
					type: 'reLaunch'
				})
				return false
			}
			const step = 1000 * 60 * 60 * 24;
			if (startPage && new Date().getTime() - startPage > step) {
				this.$u.route({
					url: '/pages/tabbar/startPage/startPage',
					type: 'reLaunch'
				})
				return false
			}
			// ------------------------
			// 获取语言
			this.getLang()
			// 获取首页横向滚动区域数据
			this.getHome()
			// 获取轮播图
			this.getSwiper()
			this.getToken()
			this.getC2cUnreadMsgNum()
		},
		methods: {
			logOut() {
				const agreeApp = uni.getStorageSync("agreeApp")
				uni.clearStorage();
				uni.clearStorageSync();
				if (agreeApp) uni.setStorageSync("agreeApp", agreeApp)
			
				// #ifndef MP-WEIXIN
				let chat = TencentCloudChat.create({
					SDKAppID: 1400818966
				});
				let promise1 = chat.logout();
				promise1.then(function(imResponse) {
					console.log(imResponse.data); // 登出成功
				}).catch(function(imError) {
					console.warn('logout error:', imError);
				});
				// #endif
			
				this.$u.toast(this.$t('操作成功'))
				setTimeout(() => {
					this.$u.route({
						// url: '/pages/tabbar/startPage/language'
						url: '/pages/user/login/login',
					})
				}, 2000)
				return false
			},
			getC2cUnreadMsgNum() {
				const that = this
				const mobile = uni.getStorageSync('mobile')
				that.isShow = 1
				that.$u.api.message.getC2cUnreadMsgNum({
					mobile: mobile,
				}).then(res => {
					that.$u.api.basic.getNoticeNum().then(r => {
						that.listLang = [{
								iconPath: "/static/images/tabbar/newStyle/t1.png",
								selectedIconPath: "/static/images/tabbar/t1s.png",
								text: that.$t('首页'),
								// count: 2,
								// isDot: true,
								customIcon: false,
								pagePath: '/pages/tabbar/index'
							},
							{
								iconPath: "/static/images/tabbar/newStyle/t2.png",
								selectedIconPath: "/static/images/tabbar/t2s.png",
								text: that.$t('订单'),
								customIcon: false,
								// isDot: true,
								pagePath: '/pages/tabbar/order/index'
							},
							{
								iconPath: "/static/images/tabbar/newStyle/t3.png",
								selectedIconPath: "/static/images/tabbar/t3s.png",
								text: that.$t('发布'),
								midButton: true,
								customIcon: false,
								pagePath: '/pages/tabbar/release/index'
							},
							{
								iconPath: "/static/images/tabbar/newStyle/t4.png",
								selectedIconPath: "/static/images/tabbar/t4s.png",
								text: that.$t('消息'),
								count: Number(res.AllC2CUnreadMsgNum) + Number(r.other) + Number(r
									.system),
								customIcon: false,
								pagePath: '/TUIKit/components/TUIConversation/list'
							},
							{
								iconPath: "/static/images/tabbar/newStyle/t5.png",
								selectedIconPath: "/static/images/tabbar/t5s.png",
								text: that.$t('我的'),
								// count: 23,
								// isDot: false,
								customIcon: false,
								pagePath: '/pages/tabbar/user/index'
							},
						]
						that.isShow = 0
			
					})
				})
			},
			
			// 获取token
			getToken(){
				uni.getStorage({
					key: 'xzdToken',
					success: res => {
						this.getAuthenticationType()
					}
				});
				
			},
			// 获取认证状态
			getAuthenticationType(){
				this.$u.api.user.getUserAudit().then(res => {
					setTimeout(()=>{
						// 0是未认证 1 待审核 2通过 3未通过 
						
						if(res.status == 0){
							this.isAuthentication = true
						}
					},2000)
						
				})
			},
			// 跳转至认证页面
			handeleGoAuthentication(){
				uni.navigateTo({
					url:'/pages/user/register/authentication'
				})
			},
			// AI助手
			goAi() {
				console.log(123);
				uni.navigateTo({
					url: "/pages/webview/test/test"
				})
			},
			// 获取首页横向滚动区域数据
			getHome() {
				let data = {
					lang: this.lang
				}
				this.$u.api.basic.getHomeIcon(data).then(res => {
					this.jurisdictionList = res[1] //轮播图
					
				})
			},

			// 搜索
			handeleSearch() {

			},
			// 获取语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
			// 获取轮播图  猜你喜欢   商品推荐
			getSwiper() {
				let data = {
					type: this.current + 1,
					searchKey: "",
					city: this.show_city,
					page: this.page
				}
				this.$u.api.collection.getHomeData(data).then(res => {
					this.swiperList = res.banners.map(item => ({
						image: this.IMGURL + item,
						title: item
					}))
					this.likeList = res.like_list  //猜你喜欢
					this.goodsList = res.list //商品推荐
				})
			},

			// 页面跳转
			handeleRouter(item) {
				uni.navigateTo({
					url: this.iconUrl[item.auth]+'?type='+item.type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index_reminder_Aut{
		width: 80%;
		height: 200rpx;
		display: flex;
		// align-items: center;
		justify-content: center;
		font-size: 40rpx;
	}
	.index_reminder{
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 38rpx;
		font-weight: 600;
	}
	.index_isAuthentication{
		width: 600rpx;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.goAi {
		position: fixed;
		right: 2%;
		bottom: 20%;
		z-index: 999;
		background-color: #fff;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}
	.scroll-container_cs {
	  width: 100%; /* 设置容器宽度 */
	  overflow-x: auto; /* 启用横向滚动 */
	  white-space: nowrap; /* 确保子项不换行 */
	}
	
	.scroll-content_cs {
	  display: inline-block; /* 使内容横向排列 */
	}
	
	.item_cs {
	margin-right: 54rpx;
	  display: inline-block; /* 使每个项目横向排列 */
	  width: 80rpx; /* 设置项目宽度 */
	  height: 120rpx; /* 设置项目高度 */
	  background-color: lightblue; /* 只是为了视觉效果 */
	}
	.index_wrap{
		height: 100rpx;
		width: 100rpx;
		// text-align: center;
		  word-break: break-all; /* 强制任何字符换行，包括在单词内部 */
		 // background-color: red;
		 font-size: 24rpx;
		  overflow-wrap: break-word; /* 尝试增加这个属性 */
	}
	.iconRout{
		width: 100rpx;
		text-align: center;
		 word-break: break-all;
		// width: 100rpx;
		// text-align: center;
		//  word-break: break-all;
		// font-size: 24rpx;
		// margin-top: 16rpx;
	}
	.goodsBrief{
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #3D3D3D;
	}
	.goodsTitle{
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #3D3D3D;
	}
	.images_header {
		width: 100%;
		height: 364rpx;
		border-radius: 0rpx 0rpx 28rpx 28rpx;
		position: absolute;
		top: 0rpx;
		z-index: 1;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.images_block_s {
		width: 336rpx;
		height: 138rpx;
		border-radius: 16rpx;
		background-color: red;
		margin-bottom: 20rpx;
	}

	.images_block_d {
		width: 336rpx;
		height: 138rpx;
		border-radius: 16rpx;
		background-color: blue;
		margin-left: 22rpx;
		margin-bottom: 20rpx;
	}

	.images_list {
		width: 100%;
		min-height: 80rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.goods_block_d {
		width: 336rpx;
		min-height: 436rpx;
		border-radius: 16rpx;
		margin-bottom: 80rpx;
		display: flex;
		flex-direction: column;
	}

	.goods_block_s {
		width: 336rpx;
		min-height: 436rpx;
		border-radius: 16rpx;
		margin-left: 22rpx;
		margin-bottom: 80rpx;
		display: flex;
		flex-direction: column;
	}

	.goods_container {
		width: 100%;
		min-height: 500rpx;
		// display: inline-block;
		display: flex;
		flex-wrap: wrap;
	}

	.Vertical_line {
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(134deg, #D9F0A3 0%, rgba(217, 240, 163, 0.411) 55%, rgba(201, 239, 49, 0) 100%);
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		margin-right: 8rpx;
	}

	.recommendTJ {}

	.index_recommend {
		border-top-left-radius: 28rpx;
		border-top-right-radius: 28rpx;
		width: 100%;
		min-height: 500rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 0rpx 30rpx 32rpx 30rpx;
	}

	.goodsImage {
		width: 200rpx;
		height: 200rpx;
		margin-right: 46rpx;
		border-radius: 16rpx;
	}

	.backTJ {
		margin-top: 20rpx;
		margin-left: -53rpx;
		width: 100rpx;
		height: 22rpx;
		border-radius: 22rpx;
		background: linear-gradient(134deg, #D9F0A3 0%, rgba(217, 240, 163, 0.411) 55%, rgba(201, 239, 49, 0) 100%);
		z-index: 99;
	}

	.recommendTJ {
		height: 88rpx;
		margin-left: 16rpx;
		width: 50%;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 700;
	}

	.goodsTJ {
		height: 88rpx;
		margin-left: 16rpx;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 700;
		position: relative;
	}

	.commodityTJ {
		width: 100%;
		height: 320rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		padding: 0rpx 30rpx 32rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.scroll-content_ {
		display: flex;
		flex-direction: row;
		height: 201rpx;
	}

	.scroll-links_block {
		width: 100%;
		height: 205rpx;
		white-space: nowrap;
		margin-top: 1rpx;
	}

	.scroll-view {
		width: 100%;
		height: 125rpx;
		white-space: nowrap;
		margin-top: 28rpx;
	}

	.goodsBlock {
		width: 100%;
		height: 210rpx;

	}

	.index_jurs {
		width: calc(100% - 60rpx);
		min-height: 122rpx;
		margin-top: 27rpx;
	}

	.link_scroll-content {
		display: flex;
		flex-direction: row;
		height: 201rpx;
	}

	.scroll-content {
		display: flex;
		flex-direction: row;
		min-height: 120rpx;
	}

	.item {
		width: 100px;
		min-height: 150px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 52rpx;
	}



	.index_jur {
		width: 80rpx;
		height: 120rpx;
		background-color: blue;
	}

	.index_min_Swiper {
		width: calc(100% - 60rpx);
		height: 146rpx;
		margin: 20rpx 0 20rpx 0;
	}

	.index_Swiper {
		width: calc(100% - 60rpx);
		height: 240rpx;
		margin-top: 20rpx;
	}

	.index_Search {
		width: calc(100% - 60rpx);
		height: 64rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-top: 118rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.index_header {
		width: 100%;
		height: 364rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		z-index: 100;
	}

	.index_Content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-x: hidden;
	}

	.Outer_container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-height: 828rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 28rpx 28rpx;
	}
</style>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>